<template>
    <div class="login-container">
      <h1 style="color: blueviolet" align="center">
        商家登录
      </h1>
      <el-form class="loginform_style" :model="user" :rules="userRules" ref="userForm">
        <el-form-item prop="loginName">
          <el-input prefix-icon="el-icon-s-custom" v-model="user.loginName" placeholder="输入您的用户名"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input type="password" v-model="user.pwd" prefix-icon="el-icon-lock" placeholder="输入您的密码" show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
      name: "Login",
      data() {
        return {
          user:{
            loginName:'',
            pwd:''
          },
          userRules:{
            loginName:[
              {required:true,message:'请输入用户名',trigger:'blur'}
            ],
            pwd:[
              {required:true,message:'请输入密码',trigger:'blur'},
              {min:6,max:6,message: '请输入6位数',trigger: 'blur'}
            ]
          }

        }
      },
      methods:{
        login:function () {//登录
          this.$refs['userForm'].validate((valid)=>{
            if(!valid){
              return;
            }

            this.$http.post("/seller/login",this.user).then((res)=>{
              if(res.data.success){//登录成功保存信息
                window.sessionStorage.setItem("seller",JSON.stringify(res.data.result.seller));
                window.sessionStorage.setItem("token",res.data.result.token);
                //跳转到商品列表
                this.$router.push('/goodslist');
                this.$message.success(res.data.message);
              }
              else{
                this.$message.error(res.data.message);
              }
            })
          })
        },
        resetForm:function () {//重置
          this.$refs['userForm'].resetFields();
        }
      },
      filters:{

      },
      mounted() {

      }
    }
</script>

<style scoped lang="less">
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

  .loginform_style {
    padding: 0 20px;
    margin-top: 110px;
  }

  .btns {
    display: flex;
    justify-content: center;
  }
  }
</style>
